<template>
	<view class="charts-box">
		<qiun-data-charts type="line" :opts="opts" :chartData="chartData" />
		<!-- <text>{{ message }}</text> -->
	</view>
</template>

<script>
import { getProjInspCnt } from '@/api/mappages/lakes/lakes.js';
export default {
	name: 'MyComponent',
	props: {
		message: {
			type: String,
			default: 'Hello from MyComponen11t'
		}
	},
	data() {
		return {
			moonData: [],
			chartData: {},
			//您可以通过修改 config-ucharts.js 文件中下标为 ['line'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
			opts: {
				color: ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
				padding: [15, 10, 0, 15],
				dataLabel: false,
				dataPointShape: false,
				enableScroll: false,
				legend: {},
				xAxis: {
					disableGrid: true
				},
				yAxis: {
					gridType: 'dash',
					dashLength: 2,
					data: [
						{
							min: 0,
							max: 150
						}
					]
				},
				extra: {
					line: {
						type: 'curve',
						width: 2,
						activeType: 'hollow',
						linearType: 'custom',
						onShadow: true,
						animation: 'horizontal'
					}
				}
			}
		};
	},
	mounted() {
		console.log(this.chartData, 'this.chartData');
		this.getServerData();
	},
	onReady() {
		this.getServerData();
	},
	methods: {
		async getServerData() {
			let arr = await getProjInspCnt();
			this.moonData = arr.result || [];
			let res = {
				categories: this.moonData.map((r) => r?.date),
				series: [
					{
						name: '巡河数',
						linearColor: [
							[0, '#1890FF'],
							[0.25, '#00B5FF'],
							[0.5, '#00D1ED'],
							[0.75, '#00E6BB'],
							[1, '#90F489']
						],
						setShadow: [3, 8, 10, '#1890FF'],
						data: this.moonData.map((r) => r?.total) //巡河数
					},
					{
						name: '交办数',
						linearColor: [
							[0, '#FAC858'],
							[0.33, '#FFC371'],
							[0.66, '#FFC2B2'],
							[1, '#FA7D8D']
						],
						setShadow: [3, 8, 10, '#FC8452'],
						data: this.moonData.map((r) => r?.restrucTotal) //交办数
					}
				]
			};
			this.chartData = JSON.parse(JSON.stringify(res));
		}
	}
};
</script>

<style scoped>
.charts-box {
	width: 100%;
	height: 300px;
}
</style>
